<template>
  <el-row class="sideNav">
    <el-col :span="12">
      <el-menu>
        <div class="logo_wrap">
          <img src="../assets/images/logo.png" alt />
          <h1>产品建站系统</h1>
        </div>
      </el-menu>
      <el-menu>
        <div class="user_item">
          <p>
            hi,{{username}}
            <a href="javascript:;" @click="loginOut">注销</a>
          </p>
        </div>
      </el-menu>
      <el-menu :default-active="pathText" text-color="#909399" active-text-color="#1890ff" router>
        <el-menu-item index="/home">
          <i class="iconfont iconhome"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="/manage">
          <i class="iconfont iconguanli"></i>
          <span slot="title">主页管理</span>
        </el-menu-item>
        <el-menu-item index="/product">
          <i class="iconfont iconproduct"></i>
          <span slot="title">所有产品</span>
        </el-menu-item>
        <el-menu-item index="/order">
          <i class="iconfont iconguanli"></i>
          <span slot="title">订单管理</span>
        </el-menu-item>
        <el-menu-item index="/article">
          <i class="iconfont iconarticle"></i>
          <span slot="title">文章管理</span>
        </el-menu-item>
        <el-menu-item index="/comment">
          <i class="iconfont iconcomment"></i>
          <span slot="title">评论管理</span>
        </el-menu-item>
        <el-menu-item index="/currency">
          <i class="iconfont iconcurrency"></i>
          <span slot="title">货币管理</span>
        </el-menu-item>
        <el-menu-item index="/pay">
          <i class="iconfont iconpay"></i>
          <span slot="title">支付管理</span>
        </el-menu-item>
        <el-menu-item index="/user">
          <i class="iconfont iconuser"></i>
          <span slot="title">成员管理</span>
        </el-menu-item>
        <el-menu-item index="/usergroup">
          <i class="iconfont iconuserGroup"></i>
          <span slot="title">部门管理</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
import Service from "../services/main";
import { $local } from "../assets/utils/utils";
export default {
  name: "Nav",
  data() {
    return {
      pathText: "",
      username: $local("userInfo").account
    };
  },
  created() {
    this.pathText = "/" + this.$route.path.split("/")[1];
  },
  methods: {
    loginOut() {
      Service.loginOut(this).then(res => {
        this.$notify({
          title: "提示",
          message: res.errorMsg,
          type: "success"
        });
        window.localStorage.clear();
        this.$router.push("/login");
      });
    }
  }
};
</script>

<style lang="scss">
.sideNav {
  width: 100%;
  height: 100%;
  background: #222;
  color: #fff;
  .logo_wrap {
    height: 160px;
    cursor: pointer;
    display: block;
    position: relative;
    border-bottom: 1px solid #000;
    text-align: center;
    line-height: 160px;
    img {
      width: 20%;
      margin-right: 5px;
      vertical-align: middle;
    }
    h1 {
      display: inline-block;
      font-size: 18px;
    }
  }
  .el-col-12 {
    width: 100%;
  }
  .el-menu {
    background: transparent;
    border-right: 0;
  }
  .el-menu-item:focus,
  .el-menu-item:hover {
    background-color: transparent;
  }

  .el-menu-item,
  .el-submenu__title {
    height: 40px;
    line-break: 40px;
  }

  .el-menu-item {
    font-size: 14px;
    .iconfont {
      display: inline-block;
      margin-right: 10px;
      width: 24px;
      text-align: center;
      font-size: 18px;
      vertical-align: middle;
    }
  }

  .user_item {
    text-align: center;
    border-bottom: 1px solid #000;
    padding: 10px 0;
    a {
      color: #666;
    }
  }
}
</style>
